<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">assignment</i>
          </div>
          <div class="card-content">
            <h4 class="card-title">{{privilegeName}}</h4>
          </div>
          <div class="card-content">
            <ol class="breadcrumb">
              &gt;&nbsp;
              <li *ngFor="let link of subLinks">
                <a href="javascript:void(0);" routerLink="/privilege-management/{{link.privilegeId}}">{{link.privilegeName}}</a>
              </li>
            </ol>
            <!-- Main row -->
            <div class="box-header">
              <div class="box-tools pull-right form-inline">
                <span class="input-group hidden-xs hidden-sm" style="width:200px">
                  <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="searchKeywords">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="clearKeywords()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="清空关键词">
                      <i class="fa fa-eraser"></i>
                    </button>
                    <button class="btn btn-default btn-sm" type="button" (click)="displayData()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="搜索">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </span>
                <button type="button" class="btn btn-info btn-sm" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top"
                  data-content="返回上一级" (click)="upToParent(parentId)">
                  <i class="fa fa-arrow-up"></i>
                </button>
                <button type="button" class="btn btn-info btn-sm" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top"
                  data-content="预览本权限项森林" (click)="displayTree()">
                  <i class="fa fa-list-ul"></i>
                </button>
                <button type="button" class="btn btn-info btn-sm" (click)="displayData()" data-container="body" data-toggle="popover" data-trigger="hover"
                  data-placement="top" data-content="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
                <button *ngIf="showAdd" type="button" class="btn btn-success btn-sm" (click)="toAdd()">添加</button>
                <button *ngIf="showModify" type="button" class="btn btn-warning btn-sm" (click)="toModify()">修改</button>
                <button *ngIf="showMoveTo" type="button" class="btn btn-warning btn-sm" (click)="toMove()">移动到</button>
                <button *ngIf="showDelete" type="button" class="btn btn-danger btn-sm" (click)="toDelete()">删除</button>
              </div>
            </div>
            <!-- /.box-header -->
            <table class="table">
              <thead class="text-primary">
                <tr>
                  <th style="width:20px">
                    <input type="checkbox" (click)="checkAll()" [(ngModel)]="checkedAll">
                  </th>
                  <th (click)="sort('privilegeName')" [class.sorting]="orderBy!='privilegeName'" [class.sorting_asc]="orderBy=='privilegeName'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='privilegeName'&&orderType=='desc'">权限项名称</th>
                  <th (click)="sort('privilegeId')" [class.sorting]="orderBy!='privilegeId'" [class.sorting_asc]="orderBy=='privilegeId'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='privilegeId'&&orderType=='desc'" class="hidden-xs">权限项id</th>
                  <th (click)="sort('parentId')" [class.sorting]="orderBy!='parentId'" [class.sorting_asc]="orderBy=='parentId'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='parentId'&&orderType=='desc'" class="hidden-xs hidden-sm">父节点id</th>
                  <th (click)="sort('isLocked')" [class.sorting]="orderBy!='isLocked'" [class.sorting_asc]="orderBy=='isLocked'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='isLocked'&&orderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let privilege of privileges">
                  <td style="width:20px">
                    <input type="checkbox" (click)="check(privilege.privilegeId)" value="{{privilege.privilegeId}}" class="privilege-list">
                  </td>
                  <td>
                    <a href="javascript:void(0);" routerLink="/privilege-management/{{privilege.privilegeId}}/1/{{pageSize}}/{{orderBy}}/{{orderType}}/{{searchKeywords}}">{{privilege.privilegeName}}</a>
                  </td>
                  <td class="hidden-xs">{{privilege.privilegeId}}</td>
                  <td class="hidden-xs">{{privilege.parentId}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{privilege.isLocked}}</td>
                  <td>
                    <button *ngIf="!privilege.isLocked&&showLock" (click)="lock(privilege.privilegeId)" type="button" class="btn btn-xs btn-danger">锁定</button>
                    <button *ngIf="privilege.isLocked&&showUnlock" (click)="unlock(privilege.privilegeId)" type="button" class="btn btn-xs btn-success">解锁</button>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- /.box-body -->
            <div class="box-footer clearfix no-border">
              <div class="pull-right">
                <app-pagination [pageNo]="pageNo" [pageSize]="pageSize" [totalPages]="totalPages" [total]="total" (pageNoChange)="goToPage($event)"
                  (pageSizeChange)="setPageSize($event)"></app-pagination>
              </div>
            </div>
          </div>
        </div>
        <!-- /.row (main row) -->
        <!-- /.content -->
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" privilege="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加权限项</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          权限项名称：
          <input type="text" id="to-add-privilege-name" class="form-control" placeholder="请输入权限项名称" [(ngModel)]="toAddPrivilegeName">
        </div>
        <div class="form-group form-inline">
          权限项Code：
          <input type="text" id="to-add-privilege-code" class="form-control" placeholder="请输入权限项Code" [(ngModel)]="toAddPrivilegeCode">
        </div>
        <div class="form-group form-inline">
          是否为菜单：
          <mat-form-field>
            <mat-select id="to-add-is-menu" [(ngModel)]="toAddIsMenu" placeholder="是否为菜单">
              <mat-option [value]="false">
                否
              </mat-option>
              <mat-option [value]="true">
                是
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-group form-inline">
          Simple Url：
          <input type="text" id="to-add-simple-url" class="form-control" placeholder="请输入Simple Url" [(ngModel)]="toAddSimpleUrl">
        </div>
        <div class="form-group form-inline">
          Icon Class：
          <input type="text" id="to-add-icon-class" class="form-control" placeholder="请输入Icon Class" [(ngModel)]="toAddIconClass">
        </div>
        <div class="form-group form-inline">
          Icon Type：
          <input type="text" id="to-add-icon-type" class="form-control" placeholder="请输入Icon Type" [(ngModel)]="toAddIconType">
        </div>
        <div class="form-group form-inline">
          简称：
          <input type="text" id="to-add-ab" class="form-control" placeholder="请输入简称" [(ngModel)]="toAddAb">
        </div>
        <div class="form-group form-inline">
          菜单关联键（英文单词）：
          <input type="text" id="to-add-collapse" class="form-control" placeholder="请输入菜单关联键（英文单词）" [(ngModel)]="toAddCollapse">
        </div>
        <div class="form-group form-inline">
          Request Method：
          <input type="text" id="to-add-request-method" class="form-control" placeholder="请输入Request Method" [(ngModel)]="toAddRequestMethod">
        </div>
        <div class="form-group form-inline">
          菜单排序值：
          <input type="text" id="to-add-sort-value" class="form-control" placeholder="请输入菜单排序值" [(ngModel)]="toAddSortValue">
        </div>
        <div class="form-group form-inline">
          父级节点：
          <span id="add-parent-id">{{privilegeName}}</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="add()">添加</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="modifyModal" tabindex="-1" privilege="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modifyModalLabel">修改权限项</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          权限项id：
          <span id="to-modify-privilege-id">{{toModifyPrivilegeId}}</span>
        </div>
        <div class="form-group form-inline">
          权限项名称：
          <input type="text" id="to-modify-privilege-name" class="form-control" placeholder="请输入权限项名称" [(ngModel)]="toModifyPrivilegeName">
        </div>
        <div class="form-group form-inline">
          权限项Code：
          <input type="text" id="to-modify-privilege-code" class="form-control" placeholder="请输入权限项Code" [(ngModel)]="toModifyPrivilegeCode">
        </div>
        <div class="form-group form-inline">
          是否为菜单：
          <mat-form-field>
            <mat-select id="to-modify-is-menu" [(ngModel)]="toModifyIsMenu" placeholder="是否为菜单">
              <mat-option [value]="false">
                否
              </mat-option>
              <mat-option [value]="true">
                是
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-group form-inline">
          Simple Url：
          <input type="text" id="to-modify-simple-url" class="form-control" placeholder="请输入Simple Url" [(ngModel)]="toModifySimpleUrl">
        </div>
        <div class="form-group form-inline">
          Icon Class：
          <input type="text" id="to-modify-icon-class" class="form-control" placeholder="请输入Icon Class" [(ngModel)]="toModifyIconClass">
        </div>
        <div class="form-group form-inline">
          Icon Type：
          <input type="text" id="to-modify-icon-type" class="form-control" placeholder="请输入Icon Type" [(ngModel)]="toModifyIconType">
        </div>
        <div class="form-group form-inline">
          简称：
          <input type="text" id="to-modify-ab" class="form-control" placeholder="请输入简称" [(ngModel)]="toModifyAb">
        </div>
        <div class="form-group form-inline">
          菜单关联键（英文单词）：
          <input type="text" id="to-modify-collapse" class="form-control" placeholder="请输入菜单关联键（英文单词）" [(ngModel)]="toModifyCollapse">
        </div>
        <div class="form-group form-inline">
          Request Method：
          <input type="text" id="to-modify-request-method" class="form-control" placeholder="请输入Request Method" [(ngModel)]="toModifyRequestMethod">
        </div>
        <div class="form-group form-inline">
          菜单排序值：
          <input type="text" id="to-modify-sort-value" class="form-control" placeholder="请输入菜单排序值" [(ngModel)]="toModifySortValue">
        </div>
        <div class="form-group form-inline">
          父级节点：
          <span id="modify-parent-id">{{privilegeName}}</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="modify()">修改</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="moveToModal" tabindex="-1" privilege="dialog" aria-labelledby="moveToModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="moveToModalLabel">移动到</h4>
      </div>
      <div class="modal-body">
        <ul class="treeview-menu" style="display:block">
          <li *ngFor="let privilege of toMovePrivilegeTrees;let idx=index" class="treeview" level="1">
            <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
            <label style="color:#3c8dbc">
              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
            <ul class="treeview-menu" style="display:block">
              <li *ngFor="let privilege of privilege.children;let idx=index" class="treeview" level="2">
                <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                <label style="color:#3c8dbc">
                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                <ul class="treeview-menu" style="display:block">
                  <li *ngFor="let privilege of privilege.children" class="treeview" level="3">
                    <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                    <label style="color:#3c8dbc">
                      <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                    <ul class="treeview-menu" style="display:block">
                      <li *ngFor="let privilege of privilege.children" class="treeview" level="4">
                        <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                        <label style="color:#3c8dbc">
                          <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                        <ul class="treeview-menu" style="display:block">
                          <li *ngFor="let privilege of privilege.children" class="treeview" level="5">
                            <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                            <label style="color:#3c8dbc">
                              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                            <ul class="treeview-menu" style="display:block">
                              <li *ngFor="let privilege of privilege.children" class="treeview" level="6">
                                <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                                <label style="color:#3c8dbc">
                                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                                <ul class="treeview-menu" style="display:block">
                                  <li *ngFor="let privilege of privilege.children" class="treeview" level="7">
                                    <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                                    <label style="color:#3c8dbc">
                                      <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                                    <ul class="treeview-menu" style="display:block">
                                      <li *ngFor="let privilege of privilege.children" class="treeview" level="8">
                                        <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                                        <label style="color:#3c8dbc">
                                          <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                                        <ul class="treeview-menu" style="display:block">
                                          <li *ngFor="let privilege of privilege.children" class="treeview" level="9">
                                            <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                                            <label style="color:#3c8dbc">
                                              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                                            <ul class="treeview-menu" style="display:block">
                                              <li *ngFor="let privilege of privilege.children" class="treeview" level="10">
                                                <input type="radio" name="moveToPrivilegeId" value="{{privilege.privilegeId}}" style="width:20px">
                                                <label style="color:#3c8dbc">
                                                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</label>
                                              </li>
                                            </ul>
                                          </li>
                                        </ul>
                                      </li>
                                    </ul>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="move()">移动</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="displayTreeModal" tabindex="-1" privilege="dialog" aria-labelledby="displayTreesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="displayTreesModalLabel">预览权限项树</h4>
      </div>
      <div class="modal-body">
        <ul class="treeview-menu" style="display:block">
          <li *ngFor="let privilege of displayPrivilegeTrees;let idx=index" class="treeview" level="1">
            <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
            <ul class="treeview-menu" style="display:block">
              <li *ngFor="let privilege of privilege.children;let idx=index" class="treeview" level="2">
                <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                <ul class="treeview-menu" style="display:block">
                  <li *ngFor="let privilege of privilege.children" class="treeview" level="3">
                    <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                      <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                    <ul class="treeview-menu" style="display:block">
                      <li *ngFor="let privilege of privilege.children" class="treeview" level="4">
                        <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                          <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                        <ul class="treeview-menu" style="display:block">
                          <li *ngFor="let privilege of privilege.children" class="treeview" level="5">
                            <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                            <ul class="treeview-menu" style="display:block">
                              <li *ngFor="let privilege of privilege.children" class="treeview" level="6">
                                <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                                <ul class="treeview-menu" style="display:block">
                                  <li *ngFor="let privilege of privilege.children" class="treeview" level="7">
                                    <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                                      <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                                    <ul class="treeview-menu" style="display:block">
                                      <li *ngFor="let privilege of privilege.children" class="treeview" level="8">
                                        <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                                          <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                                        <ul class="treeview-menu" style="display:block">
                                          <li *ngFor="let privilege of privilege.children" class="treeview" level="9">
                                            <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                                              <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                                            <ul class="treeview-menu" style="display:block">
                                              <li *ngFor="let privilege of privilege.children" class="treeview" level="10">
                                                <a href="javascript:void(0);" (click)="goToNode(privilege.privilegeId)" style="color:#3c8dbc;padding:0px;font-weight:700;margin-bottom:5px;">
                                                  <i class="fa fa-user" style="width:20px"></i>{{privilege.privilegeName}}</a>
                                              </li>
                                            </ul>
                                          </li>
                                        </ul>
                                      </li>
                                    </ul>
                                  </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>